<template>
    <div class="uploadFile">
            <div class="demo-upload-mode" v-for="(item, index) in fileList" :key="index">
                <RadioGroup v-model="coverMode" @on-change ="checkCover(item.name)" v-if="isCover">
                    <Radio :label="item.name" :disabled="iShow">封</Radio>
                 </RadioGroup>
                <div class="demo-upload-list">
                    <img :src="item.url">
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
                        <Icon type="ios-trash-outline" @click="handleRemove(index)" v-if="!iShow"></Icon>
                    </div>
                </div>
            </div>
       
        <Upload
            ref="upload" 
            v-if="!iShow && (fileList.length < maxNum)"
            :show-upload-list="false"
            :data="uploadData"
            name="multipartFile"
            :headers="uploadHeaders"
            :on-success="handleSuccess"
            :format="['jpg','png']"
            :max-size="2048"
            type="drag"
            :on-exceeded-size="handleMaxSize"
            :on-format-error="handleFormatError"
            :action="uploadImageUrl"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
            </div>
        </Upload>
        <span class="imageSize" v-if="!iShow && (fileList.length > 0 ? false : true)">{{content}}</span>
        <!-- 图片放大 -->
        <Modal title="图片预览" v-model="imageVisible" :footerHide="true">
            <img :src="bigImg" style="width: 100%">
        </Modal>
    </div>
</template>

<script>
import tool from "@/common/tool.js"
import secret from "@/common/secret.js"
import configs from "@/common/config.js"
import {unloadImageAll} from "@/api/building"
export default {
    name:"uploadFile",
    props:{
        isCover:{
            type:Boolean,
            default:false
        },
        maxNum:{
           type:Number,
           default:100 
        },
        // 定义属性名
        name:{
           type:String,
           default:''  
        },
        content:{
            type:String,
            default:'建议尺寸 750*422 大小在1M内'
        }
    },
    data() {
        return {
            uploadData: {
                appName: 'M-Web',
                appVersion: '1.2.2',
                title: new Date().getTime()
            },
            coverMode:'',                                                                          // 选择封面
            uploadImageUrl:unloadImageAll,
            uploadHeaders: {'token': tool.getToken()},
            imageVisible: false,                                                                    // 控制预览图片的弹框参数
            bigImg:'',                                                                              // 查看大图的url
            fileList:[],
            iShow:false,                                                                           // 查看
        }
    },
    beforeCreate(){
      console.log('process.env.VUE_APP_API_URL',this.uploadImageUrl)
    },
    methods:{
        // 上传地址
        handleSuccess(res, file) {
            if (res.code == '200') {
                this.ImageContents = false
                let dataJson = JSON.parse(secret.Decrypt(res.data));
                let params = {
                    url: dataJson.imageURL,
                    name: this.name || new Date().getTime()
                }
                // 是否设置封面参数 是否封面(1:是 2:否)
                if(this.isCover){
                    params.isCover = 2
                    this.fileList.push(params)
                    // 第一次上传时候默认第一张是封面图
                    if(this.fileList.length ==1){
                        this.fileList[0].isCover = 1
                        this.coverMode = this.fileList[0].name
                    }
                }else {
                    this.fileList.push(params)
                }
                this.$emit("handleSuccess",this.fileList)
            } else {
                this.$Message.error("上传出错")
            }
        },
        handleMaxSize (file) {
            this.$Message.warning('单个图片不能超过2MB');
        },
        // 文件格式验证失败
        handleFormatError (file) {
            this.$Message.warning('图片格式只支持jpg,png格式！');
        },
        handleView(url) {
            this.imageVisible = true
            this.bigImg = url
        },
        // 移除图片
        handleRemove(index) {
            this.fileList.splice(index, 1)
            this.coverMode = ""
            // 设置封面图删除
            if(this.isCover){
                this.fileList.forEach(item =>{
                    if(item.isCover == 1){
                        this.coverMode = item.name
                    }
                })
            }
            this.$emit("handleSuccess",this.fileList)
        },
        // 选择封面
        checkCover(res) {
            this.fileList.forEach(item =>{
                item.isCover = 2
                if(item.name == res){
                    item.isCover = 1
                }
            })
            this.$emit("handleSuccess",this.fileList)
        },
        init(v) {
            if(v == 'view'){
                this.iShow = true
            }else {
                this.iShow = false
            }
            console.log("获得 的iview:"+this.iShow,!this.iShow);
        }
    }
}
</script>

<style lang="scss" scoped>
  // 上传
.uploadFile {
 .demo-upload-mode {
    display: inline-block;
    text-align: center;
 }
  .demo-upload-list{

    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  /deep/.ivu-form-item-content{
    display: flex;
  }
  .imageSize{
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    padding-top: 16px;
  }
}
</style>